
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Firebase + Validation - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Lato|Inconsolata' rel='stylesheet' type='text/css'>
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "examples"
        </script>
        <link rel="stylesheet" href="/css/page.css" type="text/css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link">API Reference</a></li>
<li><a href="/examples/" class="nav-link current">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
    </ul>
</div>
            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link">API Reference</a></li>
<li><a href="/examples/" class="nav-link current">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
    </ul>
    <div class="list">
        <h2>Examples</h2>
        <ul class="menu-root">
            
                <li><a href="/examples/index.html" class="sidebar-link">Markdown Editor</a></li>
            
                <li><a href="/examples/commits.html" class="sidebar-link">GitHub Commits</a></li>
            
                <li><a href="/examples/firebase.html" class="sidebar-link current">Firebase + Validation</a></li>
            
                <li><a href="/examples/grid-component.html" class="sidebar-link">Grid Component</a></li>
            
                <li><a href="/examples/tree-view.html" class="sidebar-link">Tree View</a></li>
            
                <li><a href="/examples/svg.html" class="sidebar-link">SVG Graph</a></li>
            
                <li><a href="/examples/image-slider.html" class="sidebar-link">Image Slider Component</a></li>
            
                <li><a href="/examples/todomvc.html" class="sidebar-link">TodoMVC</a></li>
            
                <li><a href="/examples/hackernews.html" class="sidebar-link">HackerNews Clone</a></li>
            
        </ul>
    </div>
</div>


<div class="content examples with-sidebar">
    <h1>Firebase + Validation Example</h1>
    <div id="ad">
        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
    </div>
    <blockquote>
<p>This example uses <a href="https://www.firebase.com/" target="_blank" rel="external">Firebase</a> as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using Vue.js filters and triggers CSS transitions when adding/removing items.</p>
</blockquote>
<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/2ok0hp6c/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
    <div class="footer">Caught a mistake or want to contribute to the documentation? <a href="https://github.com/vuejs/vuejs.org" target="_blank">Fork this site on Github</a>!</div>
</div>
                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        
    </body>
</html>